<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>科学计算器</title>
    <style>
    * {font-size:12px;}
    body{background-color: buttonface;}
    .button{width:80px;height:30px};
    #txt_display{width:400px;cursor:default;text-align: right}
    </style>
<script type="text/javascript">
    //将所有按钮内容存放在数组中
    calc_btns=[0,1,2,3,4,5,6,7,8,9,".","=","+","-","*","/","AC","sin","cos","tan","asin","acos","atan","ln"];
    //用于计算的全局变量,分别指代上一步操作的结果、运算符和是否需要清空原有输入
    var previous_value=0,op="",start_new_input=true;
    function write_table()//创建绘制页面函数
    {
       document.write("<table>");
       document.write("<tr>");
       for(var i=0;i<calc_btns.length;i++)
       {
           document.write("<td><input value='"+calc_btns[i]+"' type='button' class='button' onclick='calc(this.value)'></td>");
           if((i+1)%5==0)
           {
               document.write("<tr></tr>");
           }
       }
       document.write("</tr>");
       document.write("</table>");
    }

    function calc(strCMD)
    {
        var txtDisplay=document.getElementById("txt_display");//获取文本框元素
        //根据按钮决定操作
        switch(strCMD)
        {
          //如果是三角函数，调用Math对象的相应方法
          case "sin": txtDisplay.value=Math.sin(txtDisplay.value);break;
          case "cos": txtDisplay.value=Math.cos(txtDisplay.value);break;
          case "tan": txtDisplay.value=Math.tan(txtDisplay.value);break;
          case "asin": txtDisplay.value=Math.asin(txtDisplay.value);break;
          case "acos": txtDisplay.value=Math.acos(txtDisplay.value);break;
          case "atan": txtDisplay.value=Math.atan(txtDisplay.value);break;
          case "ln": txtDisplay.value=Math.log(txtDisplay.value);break;
          //如果是四则运算，则执行计算
          case "+":
          case "-":
          case "*":
          case "/":
            start_new_input=true;
            if(op!=""&&txtDisplay.value!="")
            {
                txtDisplay.value=eval(previous_value+op+txtDisplay.value);
                op=strCMD;
            }
            else
            {
                op=strCMD;
            }
            break;
          case "=":
            start_new_input=true;
            if(op!=""&&txtDisplay.value!="")
            {
                txtDisplay.value=eval(previous_value+op+txtDisplay.value);
            }
            op="";
            previous_value=0;
            break;
          case "AC": //重置所有变量，恢复初始状态
            previous_value=0;
            txtDisplay.value="0";
            op="";
            start_new_input=true;
            break;
          case ".": //如果是小数点
            //调用字符串的indexOf方法查找，如果当前输入中已经有了小数点则跳出操作
            //本段case最后没有break语句，如果当前输入中没有小数点，则会执行default块
            if(txtDisplay.value.indexOf(".")!=-1)
            {
                break;
            }
          default: //如果是0~9或小数点
            //如果需要清空原有输入，则将原有输入保存在previous_value中，并将需要清空原有输入的状态设为false
            if(start_new_input)
            {
                start_new_input=false;
                previous_value=txtDisplay.value;
                txtDisplay.value="0";
            }
            //如果当前输入的不是0
            if(txtDisplay.value!="0")
            {
                txtDisplay.value+=strCMD;
            }
            else if(strCMD!="0")
            {
                txtDisplay.value=strCMD;
            }   
        }   
    }
</script>
</head>
<body style="overflow:auto;">
    <input id="txt_display" value="0" readonly style="width:410px;cursor:default;text-align: right"/>
    <script>
      write_table();
    </script>
</body>
</html>